
<template>
  <div class="screen-content">
    <header class="header">
      <div class="header-group">
        <div class="header-text">云影像数据看板</div>
      </div>
      <div class="header-left"></div>
      <!-- <div class="header-right">
        <div class="header-text-top1 header-text">2020年8月23日</div>
        <div class="header-text-bottom1 header-text">
          <span>星期二</span><span>晴</span>
        </div>
      </div> -->
    </header>
    <div class="screen-article">
      <div class="article-center">
        <div class="article-center-content">
          <div class="number-center" id="eachart6"></div>
          <div class="number-left">
            <div class="number-box">
              <div class="left-top">{{totalfilm}}</div>
              <div class="left-bottom">胶片量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">{{totalreport}}</div>
              <div class="left-bottom">报告量</div>
            </div>
            <div class="number-box">
              <div class="left-top">{{totaldcm}}</div>
              <div class="left-bottom">dicom量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">{{totalperson}}</div>
              <div class="left-bottom">检查人次</div>
            </div>
          </div>
          <div class="number-right">
            <div class="number-box">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">总容量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">胶片容量</div>
            </div>
            <div class="number-box">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">报告容量</div>
            </div>
            <div class="number-box" style="margin-top: 16px">
              <div class="left-top">45<span>GB</span></div>
              <div class="left-bottom">dicom容量</div>
            </div>
          </div>

        </div>

      </div>
      <div class="article-right">
        <div class="article-right-top">
          <div class="train">
            <div class="title"><span>医院诊断申请量</span></div>
            <div class="eachart-group" id="eachart1"></div>
          </div>
          <div class="qualified">
            <div class="title"><span>医院诊断完成量</span></div>
            <div class="eachart-group" id="eachart2"></div>
          </div>
        </div>
        <div class="unit">
          <div class="title"><span>医院容量统计</span></div>
          <div class="eachart-group" id="eachart3"></div>
        </div>
      </div>
    </div>
    <div class="screen-bottom">
      <div class="achievement">
        <div class="title"><span>业务总览趋势图</span></div>
        <div class="eachart-group" id="eachart4"></div>
      </div>
      <div class="moment">
        <div class="title"><span>患者访问量</span></div>
        <div class="eachart-group" id="eachart5"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import * as echarts from "echarts";
import axios from 'axios';
export default {
  name: "cloudShadow",
  computed: {
    ...mapState({
      rbacAuth: (state) => state.app.rcba,
    }),
  },
  data() {
    return {
      treeData: [],
      dialog: false,
      disabled: false,
      totaldcm:0,// dcm 数量
      totalreport:0,// 报告数量
      totalfilm:0,// 胶片数量
      totalperson:0,// 检查人次
      hoslocalarr:[],
      zdnumarr:[],
      hoslistarr:[],
      query: {
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      pageTotal: 0,
      multipleSelection: [],
      ruleForm: {
        title: "",
        mark: "",
        sort: "",
        status: false,
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      dialogTitle: "新增",
      id: null,
   
      dataList: [
        { name: "南海诸岛", value: 100, eventTotal: 100, specialImportant: 10, import: 10, compare: 10, common: 40, specail: 20 },
        { name: "北京", value: 540 },
        { name: "天津", value: 130 },
  
      ]
    };
  },
  mounted() {
    this.initAjaxMethod();
    
    this.eacharts2();
    this.eacharts3();
    this.eacharts4();
     this.eacharts5();
    //this.eacharts6();
  },
  methods: {
    //列表加载
    initAjaxMethod() {
      this.$http
        .post(this.$API.CLOUDDIAGNOSIS_countyzdbasicinfo, {
          pageIndex: this.query.pageIndex,
          pageSize: this.query.pageSize,
          title: this.query.keyword,
        })
        .then((res) => {
          console.log("媒资列表", res);
          if (res.code == 1) {
            // this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
              // console.log(res.hoslocalarr);
              
            this.hoslistarr =  res.hoslist;
            this.hoslocalarr =  res.hoslocalarr;
            this.zdnumarr =  res.zdnumarr;
            this.totaldcm =  res.totaldcm;
            this.totalreport =  res.totalreport;
            this.totalfilm =  res.totalfilm;
            this.totalperson =  res.totalperson;
          //  console.log(this.hoslocalarr);
          this.eacharts1();
          this.eacharts6();
            // this.pageTotal = res.data.total;
          }
        });
    },
    // 柱状图
    eacharts1() {
      let myChart = echarts.init(document.getElementById("eachart1"));

        //  this.hoslistarr =  res.hoslist;
      let option = {
      //   label: {
      //    normal: {
      //     show: true,
      //     position: 'top',
      //     textStyle: {
      //       color: 'black'
      //     }
      // },
      // },
        xAxis: {
          type: "category",
          data: this.hoslistarr.map((v,i)=>i+1),
          // data: ["Mon"],
        },
        yAxis: {
          type: "value",
        },
    //     dataset: {
    //     source: [
    //         ['月份', '订单数', '订单金额'],
    //   ['2月', 150, 30,],
    //         ['3月', 83.1, 73.4,0],
    //         ['4月', 86.4, 65.2,0],
    //         ['5月', 72.4, 53.9,0]
    //     ]
    // }, 
        series: [
          {
            data: this.hoslistarr.map(i=>i.totalreport_d),
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
            }
            }

          },
        ],

        tooltip: {
              // triggerOn: "mousemove", 
              padding: 8,
              borderWidth: 2,
              borderColor: '#409eff',
              backgroundColor: 'rgba(0,80,201,.6)',
              textStyle: {
                color: '#ffffff',// 鼠标浮动上面的字体
                fontSize: 10
              },
              formatter: (e, t, n)=>{
                console.log('e.data',e)
                // let data = e.data;
                let context = `
                            <div>
                                <p><b style="font-size:15px;">${this.hoslistarr[e.dataIndex].name}</b></p>
                                <p class="tooltip_style"><span class="tooltip_left">总数</span><span class="tooltip_right">${this.hoslistarr[e.dataIndex].totalreport_d}</span></p>
                            </div>
                            `;
                return context;
              }
            },

      };
      myChart.setOption(option);
    },
    eacharts2() {
      let myChart = echarts.init(document.getElementById("eachart2"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts3() {
      let myChart = echarts.init(document.getElementById("eachart3"));
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    eacharts4() {
      let myChart = echarts.init(document.getElementById("eachart4"));
      let option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["检查量", "胶片量", "报告量", "影像量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        
        series: [
          {
            name: "检查量",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "胶片量",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "报告量",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "影像量",
            type: "line",
            stack: "Total",
            data: [320, 332, 301, 334, 390, 330, 320],
          }
           
        ],
      };
      myChart.setOption(option);
    },
    eacharts5() {
      let myChart = echarts.init(document.getElementById("eachart5"));
      let option = {
        title: {
          text: "Stacked Line",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["胶片量", "报告量", "影像量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "胶片量",
            type: "line",
            stack: "Total",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "报告量",
            type: "line",
            stack: "Total",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "影像量",
            type: "line",
            stack: "Total",
            data: [150, 232, 201, 154, 190, 330, 410],
          }
        ],
      };
      myChart.setOption(option);
    },
    eacharts6() {
      // 地图
      const geoCoordMap1 = {
        "台安蓝博医院": ["122.43", "41.39"], "大庆2": [126.03, 48.58]      
      };

        let geoCoordMap={};
        //  this.hoslocalarr.forEach(item=>{
        //         this.tags.push({uid:item.uid,uname:item.uname})
        //     })
        // let arr =[{ id:1,name:'张三’}{id:2,name:'李四’}]
      this.hoslocalarr.forEach(item=>geoCoordMap[item.name]= [item.value[0],item.value[1]])

        console.log(geoCoordMap);
    
      const data1 = [
        { name: '台安蓝博医院', value: 279, }, {name: '大庆2', value: 300, }, {name: '大庆3', value: 300, }
      ];

      const data =this.zdnumarr;
      //console.log(this.zdnumarr);
      // geoCoord.concat(data[i].value)  // 应该是汇总作用
      const convertData = function () {
        var res = [];
        for (var i = 0; i < data.length; i++) {
      
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
                console.log(res);
        return res;
      };
  
      let basePath=window.location.hostname == 'localhost'?'/':'/web/';
      axios.get(`${basePath}china.json`).then(res => {
        if (res.status === 200 && Array.isArray(res.data.features)) {
          let myChart = echarts.init(document.getElementById("eachart6"), null, { renderer: 'svg' });
          echarts.registerMap('china', res.data); //这个特别重要
          myChart.off('click');
          //echart 配制option  
          var options = {
            tooltip: {
              // triggerOn: "mousemove", 
              padding: 8,
              borderWidth: 2,
              borderColor: '#409eff',
              backgroundColor: 'rgba(0,80,201,.6)',
              textStyle: {
                color: '#ffffff',// 鼠标浮动上面的字体
                fontSize: 10
              },
              formatter: function (e, t, n) {
                console.log('e.data',e.data)
                let data = e.data;
                let context = `
                            <div>
                                <p><b style="font-size:15px;">${data.name}</b></p>
                                <p class="tooltip_style"><span class="tooltip_left">总数</span><span class="tooltip_right">${data.value[2]}</span></p>
                            </div>
                            `;
                return context;
              }
            },
            // visualMap: {
            //   show: true,
            //   left: 26,
            //   bottom: 40,
            //   showLabel: true,
            //   pieces: [
            //     {
            //       gte: 1000,
            //       label: ">= 1000",
            //       color: "#5475f5"
            //     },
    
            //     {
            //       gte: 10,
            //       lt: 99,
            //       label: "10 - 99",
            //       color: "#74e2ca"
            //     },
            
            //   ]
            // },
            geo: {
              map: "china",
              scaleLimit: {
                min: 1,
                max: 2
              },
              roam: true,
              zoom: 1.5,
              top: 120,
              layoutSize: "100%", //保持地图宽高比
              // 省市区的 字体
              label: {
                normal: {
                  show: true,
                  fontSize: 8,
                  color: "#ffffff"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    color: "#F3F3F3"
                  }
                }
              },
              itemStyle: {
                normal: {
                  borderColor: "#7bcada",
                  areaColor: 'rgba(0,80,201,.8)',
                },
                emphasis: {
                  show: true,
                  areaColor: "#00fff4",// #4876FF  00fff4 ,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  borderWidth: 0
                }
              }
            },
            series: [
              {
                    name: 'Top 5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    symbolSize: [35, 35],
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 9,
                            },
                            formatter(value) {
                                return value.data.value[2]
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F56C6C', //标志颜色
                        }
                    },
                    data: convertData(),
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    zlevel: 1
                },
            ]
          };
          myChart.clear();
          myChart.setOption(options);
          myChart.resize();
          //地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数		   据；
          myChart.on('click', function (params) {
            console.log(params);
          });
        }
      });

    }
  },
};
</script>

<style scoped lang='less'>
.screen-content {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/screen/bg.png") center no-repeat;
  background-size: 100% 100%;
  position: relative;

  .header {
    width: 100%;
    height: 0.0925vh * 158;
    background: url("../../assets/img/screen/header.png") center no-repeat;
    background-size: 100% 100%;

    .header-group {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 16px;
    }

    .header-icon {
      height: 0.0925vh * 47;
      width: auto;
    }

    .header-text {
      padding-left: 10px;
      font-size: 0.0925vh * 47;
      font-weight: 600;
      color: #ffffff;
      white-space: nowrap;
    }

    .header-left,
    .header-right {
      position: absolute;
      width: 0.052vw * 298;
      height: 0.0925vh * 58;
      top: 0.0925vh * 72;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 4px 0 2px 0;
    }

    .header-left {
      background: url("../../assets/img/screen/screen_logo.png") left center no-repeat;
      background-size: auto 100%;
      left: 30px;
    }

    .header-right {
      background: url("../../assets/img/screen/header_right.png") center no-repeat;
      background-size: 100% 100%;
      right: 30px;
    }

    .header-text {
      font-weight: bold;
      color: #00fff4;
    }

    .header-text-top {
      font-size: 14px;
      padding-left: 24px;
      line-height: 20px;
    }

    .header-text-bottom {
      font-size: 12px;
      padding-right: 15px;
      text-align: right;
      line-height: 14px;
    }

    .header-text-top1 {
      font-size: 14px;
      padding-right: 0.052vw * 51;
      text-align: right;
      line-height: 20px;
    }

    .header-text-bottom1 {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      margin-left: 21px;
      width: 0.052vw * 87;
      line-height: 14px;
    }
  }

  .title {
    display: flex;
    align-items: center;
    line-height: 24px;
    padding-left: 10px;

    span:nth-child(1) {
      font-size: 16px;
      font-weight: bold;
      color: #00fff4;
    }

    span:nth-child(2) {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      padding-left: 10px;
    }
  }

  .screen-article {
    padding: 0 0.052vw * 30;
    display: flex;
    height: 0.0925vh * 600;

    .article-center {
      flex: 1;
      height: 100%;
      width: 0.052vw * 1200;
      padding-right: 30px;

      .article-center-content {
        height: 100%;
        padding: 0 0.052vw * 100;
        position: relative;

        .number-left,
        .number-right {
          position: absolute;
          top: 0;
          width: 0.052vw * 100;
          height: 100%;
        }

        .number-left {
          left: 0;
        }

        .number-right {
          right: 0;
        }

        .number-center {
          width: 100%;
          height: 100%;
        }

        .number-box {
          width: 0.052vw * 100;
          height: 0.0925vh * 90;
          background: url("../../assets/img/screen/group6.png") center no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .left-top {
            font-size: 0.0925vh * 20;
            color: #fff;
            //font-weight: bold;
            line-height: 0.0925vh * 44;

            span {
              font-size: 0.0925vh * 14;
              font-weight: 400;
              color: #ffffff;
              padding-left: 4px;
            }
          }

          .left-bottom {
            font-size: 14px;
            color: #fff;
            padding-top: 4px;
          }
        }
      }
    }

    .article-right {
      width: 0.052vw * 750;
      height: 100%;

      .article-right-top {
        display: flex;
        height: 50%;
      }

      .train {
        height: 100%;
        background: url("../../assets/img/screen/group1.png") center no-repeat;
        background-size: 100% 100%;
        width: 48%;
        padding: 10px;
      }

      .qualified {
        width: 48%;
        background: url("../../assets/img/screen/group1.png") center no-repeat;
        background-size: 100% 100%;
        margin-left: 4%;
        padding: 10px;
      }

      .unit {
        height: 46%;
        margin-top: 4%;
        background: url("../../assets/img/screen/group4.png") center no-repeat;
        background-size: 100% 100%;
        width: 100%;
        padding: 10px;
      }
    }
  }

  .screen-bottom {
    height: 0.0925vh * 280;
    display: flex;
    padding-top: 0.0925vh * 30;

    .achievement {
      width: 48%;
      height: 100%;
      background: url("../../assets/img/screen/group4.png") center no-repeat;
      background-size: 100% 100%;
      padding: 10px;
    }

    .moment {
      width: 48%;
      margin-left: 4%;
      height: 100%;
      background: url("../../assets/img/screen/group4.png") center no-repeat;
      background-size: 100% 100%;
      padding: 10px;
    }
  }

  .eachart-group {
    height: calc(100% - 24px);
  }
}
</style>
